"use client"; // 添加这行作为文件的第一行
import { useRouter } from "next/navigation";
import ProvinceButton from "../app/ProvinceButton/ProvinceButton"; // 导入 Client Component

const regions = [
  {
    name: "华北区",
    provinces: ["北京市", "河北省", "天津市", "山西省", "内蒙古区"],
    courses: [
      { title: "北京市", link: "/course/2" },
      { title: "河北省", link: "/course/3" },
      { title: "天津市", link: "/course/3" },
      { title: "山西省", link: "/course/3" },
      { title: "内蒙古区", link: "/course/3" },
    ],
  },
  {
    name: "东北区",
    provinces: ["黑龙江省", "吉林省", "辽宁省"],
    courses: [
      { title: "黑龙江省", link: "/baoming/heilongjiangsheng" },
      { title: "吉林省", link: "/course/3" },
      { title: "辽宁省", link: "/course/3" },
    ],
  },
  {
    name: "华东区",
    provinces: ["上海市", "江苏省", "浙江省", "安徽省", "福建省", "江西省", "山东省"],
    courses: [
      { title: "上海市", link: "/course/2" },
      { title: "江苏省", link: "/course/3" },
      { title: "浙江省", link: "/baoming/zhejiangsheng" },
      { title: "安徽省", link: "/course/2" },
      { title: "福建省", link: "/course/3" },
      { title: "江西省", link: "/course/3" },
      { title: "山东省", link: "/course/3" },
    ],
  },
  {
    name: "中南区",
    provinces: ["河南省", "湖南省", "湖北省", "广东省", "广西区", "海南省"],
    courses: [
      { title: "河南省", link: "/course/2" },
      { title: "湖南省", link: "/course/3" },
      { title: "湖北省", link: "/course/3" },
      { title: "广东省", link: "/baoming/guangdongshi" },
      { title: "广西区", link: "/baoming/guangxishi" },
      { title: "海南省", link: "/baoming/hainanshi" },
    ],
  },
  {
    name: "西南区",
    provinces: ["重庆市", "四川省", "贵州省", "云南省"],
    courses: [
      { title: "重庆市", link: "/course/2" },
      { title: "四川省", link: "/baoming/sichuansheng" },
      { title: "贵州省", link: "/course/3" },
      { title: "云南省", link: "/yunnan" },
    ],
  },
  {
    name: "西北区",
    provinces: ["陕西省", "甘肃省", "宁夏区", "青海省", "新疆区"],
    courses: [
      { title: "陕西省", link: "/course/2" },
      { title: "甘肃省", link: "/course/3" },
      { title: "宁夏区", link: "/course/3" },
      { title: "青海省", link: "/qinghai" },
      { title: "新疆区", link: "/baoming/xinjiangsheng" },
    ],
  },

];



export default function ConsultationSection() {
  const router = useRouter();

  const handleClick = () => {
    router.push("/baoming/zhongshuishi");
  };
  
  return (

    // 设置头部距离 id="consultation-section"添加瞄点
    <section id="consultation-section"  className="py-8 bg-white -mt-10">
      <div className="container mx-auto px-4 ">
        {/* mb-2标题和描述之间的空白距离 */}
        <h2 className="text-3xl font-bold text-center mb-1 text-red-600 ">网络主播合规培训报名入口</h2>
        <p className="text-xl text-center mb-1 text-red-600">请各合作机构/学员按照区域(公司所在省、直辖市、自治区)属地报名</p>
        {/* mb调整文本之间的间距 */}
        {/* space-y-8每个模块之间的垂直距离 */}
        <div className="w-full mx-auto space-y-0">
          {regions.map((region, index) => (
            // 设置区域背景色及宽度距离w-full确保容器占满父级
            <div key={region.name} className="bg-white p-2.5 rounded-lg shadow-sm w-full">
              {/* 区域名称 */}
              <div className="relative flex justify-center items-center mb-2">
                {/* 定位标签 */}
                <span className="text-gray-500">📍</span>
                {/* 区域名称 */}
                <h3 className="text-2xl font-semibold text-blue-600 text-center">
                  {region.name}
                </h3>
              </div>
              {/* 省份列表 */}
              <div className="flex flex-wrap gap-3 justify-center text-xl">
                {region.provinces.map((province) => {
                  const course=region.courses?.find((course)=>course.title==province);
                  return(
                    <ProvinceButton
                    key={province}
                    province={province}
                    link={course?.link}/>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
        <div>
          <button className="w-full mx-auto text-center text-2xl font-bold mt-4 space-y-2 text-red-600" onClick={handleClick} >中税师(北京)税务咨询中心 </button>
          <p className="  text-center "> (非各省、直辖市、自治区合作机构招生的，请在中税师报名)</p>
        </div>
      </div>
    </section>
  );
}